<template>
  <div class="tw-libchart">
    <div v-show="data.length>0"
      class="tw-datasetchart" id="chart"
      ref="chart"
      :style="{height: height, backgroundColor: bgColor}">
    </div>

    <tw-lib-nodata v-show="data.length===0" />
  </div>
</template>

<script>
import props from './props'
import chartMixins from '../tw-lib-base/chart/chart'

export default {
  name: 'chart-customized-bar-tooltip',

  mixins: [chartMixins],

  props,

  data() {
    return {
      chartType: 'bar'
    }
  },

  computed: {
    xNamePad () {
      if (this.xNamePadding === '') {
        return []
      } else {
        let name = this.xNamePadding.split(',')
        let label = []
        for (let i = 0; i < name.length; i++) {
          if (name[i]) {
            label.push(parseInt(name[i]))
          } else {
            label.push(0)
          }
        }
        return label
      }
    },
    yNamePad () {
      if (this.yNamePadding === '') {
        return []
      } else {
        let name = this.yNamePadding.split(',')
        let label = []
        for (let i = 0; i < name.length; i++) {
          if (name[i]) {
            label.push(parseInt(name[i]))
          } else {
            label.push(0)
          }
        }
        return label
      }
    },
    yNamePad1 () {
      if (this.yNamePadding1 === '') {
        return []
      } else {
        let name = this.yNamePadding1.split(',')
        let label = []
        for (let i = 0; i < name.length; i++) {
          if (name[i]) {
            label.push(parseInt(name[i]))
          } else {
            label.push(0)
          }
        }
        return label
      }
    }
  },

  methods: {
    tooltipFunction (params) {
      let vm = this
      let label = ''
      vm.tooltipData.forEach((item, index) => {
        if (item[0] === params[0].axisValue) {
          for (let i = 1; i <= item.length - 1; i++) {
            if (i === 1) {
              label += item[i]
            } else if (i % 5 === 1) {
              label += '<br>' + item[i]
            } else {
              label += '&nbsp;&nbsp;&nbsp;' + item[i]
            }
          }
        }
      })
      return label
    },
    init() {
      let vm = this
        this.chart = window.echarts.init(this.$refs.chart)

        if (this.data.length > 0) {
          this.setSeries()
          this.setOption()
        }
    },
    blurHandle () {
      if (this.chart) {
        this.chart.dispatchAction({
          type: 'hideTip'
        })
      }
    },
    setSeries () {
      let vm = this
      let length = 0
      if (this.seriesIsRow) {
        length = this.data.length
      } else {
        length = this.data[0].length
      }
      this.series = []
      for (let i = 0; i < length - 1; i++) {
        if (length === 2) {
          this.series.push({
            type: 'bar',
            label: {
              show: this.showBarLabel,
              fontSize: this.barFontSize,
              position: this.barPosition,
              formatter: (params) => params.value[1] + '%'
            },
            itemStyle: {
              color: function (params) {
                return vm.colors[params.dataIndex]
              }
            },
            barMaxWidth: this.barMaxWidth,
            seriesLayoutBy: this.seriesIsRow ? 'row' : 'column'
          })
        } else {
          this.series.push({
            type: 'bar',
            barMaxWidth: this.barMaxWidth,
            label: {
              show: this.showBarLabel,
              fontSize: this.barFontSize,
              position: this.barPosition
            },
            seriesLayoutBy: this.seriesIsRow ? 'row' : 'column'
          })
        }
      }
    },

    setOption () {
      if (this.data.length > 0) {
        this.chart.setOption(this.option, true)
        this.chart.off('click')
        this.chart.on('click', this.handleclick)
        this.resize()
      }
    },

    handleclick (params) {
      this.$emit('input', params.name)
      this.$emit('change', params.name)
    },

    resize () {
      this.chart.resize({
        width: this.$el.offsetWidth || this.$ui.el.innerWidth(this.$el.parentElement),
        height: parseInt(this.height) || this.$el.offsetHeight
      })
    },

  },

  watch: {
    barMaxWidth () {
      this.setSeries()
    },
    showBarLabel () {
      this.setSeries()
    },
    barFontSize () {
      this.setSeries()
    },
    barPosition () {
      this.setSeries()
    },

    tooltipData: {
      deep: true,
      handler () {
        this.setSeries()
        this.setOption()
      }
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
